import { Radio, Form, Input } from 'antd'
import {
  type WelcomeMessage,
  WelcomeMessageMatchType as MatchType,
} from '@/services/features/welcome-messages'
import { labelCol } from '.'
import './index.module.less'

export default function MatchTypeFields() {
  return <>
    <Form.Item name="matchType" label="最后一条企微欢迎语类型" rules={[{ required: true }]}>
      <SelectMatchType />
    </Form.Item>

    <Form.Item shouldUpdate noStyle>
      {form => {
        const matchType = form.getFieldValue('matchType') as WelcomeMessage['matchType']
        if (matchType === MatchType.Text) return <MatchTextFields />
        else if (matchType === MatchType.MiniProgram) return <MatchMiniProgramFields />
        else return <MatchOtherFields />
      }}
    </Form.Item>
  </>
}

function SelectMatchType(props: { value?: MatchType; onChange?: (type: MatchType) => void }) {
  const { value, onChange } = props
  return <div styleName="select-match-type">
    <div styleName="tips">
      请选择在企微设置的欢迎语最后一条的消息类型，增强欢迎语将在这条消息发送后发出。
    </div>
    <Radio.Group
      defaultValue={MatchType.Text}
      value={value}
      onChange={e => onChange!(e.target.value as MatchType)}
    >
      <Radio value={MatchType.Text}>文字</Radio>
      <Radio value={MatchType.MiniProgram}>小程序</Radio>
      <Radio value={MatchType.Image}>图片</Radio>
      <Radio value={MatchType.Video}>视频</Radio>
    </Radio.Group>
  </div>
}

function MatchTextFields() {
  return <Form.Item
    name="keyword"
    label="包含关键词"
    rules={[{ required: true }]}
    labelCol={labelCol}
  >
    <Input maxLength={50} placeholder="包含关键词" />
  </Form.Item>
}

function MatchMiniProgramFields() {
  return <>
    <Form.Item name="appid" label="AppId" rules={[{ required: true }]} labelCol={labelCol}>
      <Input maxLength={50} placeholder="请输入 AppId" />
    </Form.Item>
    <Form.Item
      name="enterpoint"
      label="小程序路径"
      rules={[{ required: true }]}
      labelCol={labelCol}
    >
      <Input maxLength={50} placeholder="请输入小程序路径" />
    </Form.Item>
  </>
}

function MatchOtherFields() {
  return <Form.Item colon={false} label=" " labelCol={labelCol}>
    <div styleName="match-other-tips">
      目前尚不能准确识别图片/视频的内容，如果企微欢迎语包含多条图片视频，增强欢迎语可能无法准确在最后一条欢迎语发送后发出。因此建议在企微仅设置一条图片/视频欢迎语，其余的图片/视频通过quntool发送。
    </div>
  </Form.Item>
}
